<template>
  <div id="login" :style="{backgroundImage: 'url('+bingWallpaperUrl+')'}">
    <el-card id="form">
      <div slot="header">
        <span>
          <i class="el-icon-d-arrow-right"></i>
          欢迎登录
        </span>
      </div>
      <el-input placeholder="请输入用户名" v-model="username">
        <i slot="suffix" class="iconfont icon-user"></i>
      </el-input>
      <el-input placeholder="请输入密码" v-model="password" type="password" @keyup.enter.native="login">
        <i slot="suffix" class="iconfont icon-lock"></i>
      </el-input>
      <el-row>
        <!-- <el-col :span="12">
          <el-input
            type="text"
            v-model="code"
            auto-complete="off"
            placeholder="请输入验证码"
            @keyup.enter.native="login"
          ></el-input>
        </el-col>
        <el-col :span="9" :offset="3">
          <img
            :src="code_url"
            v-loading="codeLoading"
            width="90px"
            crossorigin="Anonymous"
            style="display: block;height: 40px;margin: 0 auto;"
            @click="changeCode"
            ref="auth_img"
          />
        </el-col>-->
        <el-col :span="24">
          <transition name="fade" mode="out-in">
            <verify-component v-if="!isCross" :successFun="across" />
            <el-button
              round
              v-else
              type="primary"
              @click="login"
              v-loading="loading"
              @key.enter="login"
            >登录</el-button>
          </transition>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import verifyComponent from "@/components/verifyComponent.vue";
export default {
  components: {
    verifyComponent,
  },
  data() {
    return {
      bingWallpaperUrl: require("../assets/bg.jpg"),
      username: "",
      password: "",
      codeLoading: false,
      loading: false,
      code_url: "",
      code: "",
      isCross: false,
    };
  },
  methods: {
    across() {
      setTimeout(() => {
        this.isCross = true;
      }, 800);
    },
    login() {
      if (this.isCross) {
        this.loading = true;
        // console.log(this.$api);
        this.$http
          .post("/Login", {
            username: this.username,
            password: this.password,
          })
          .then((res) => {
            let data = res.data;
            //console.log(data);
            if (res.data.code == 200) {
              new Promise((resolve) => {
                this.$store.commit("saveToken", data.data.msg.token);
                this.$store.commit("saveUser", data.data.msg.user);
                resolve();
              }).then(() => {
                this.$router.push("/index");
              });
            } else {
              this.$message.error("登录失败");
            }
          })
          .catch((data) => {
            this.$message.error("用户名或密码错误");
            console.log(data);
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    changeCode() {
      this.codeLoading = true;
      this.$api.verifyCode(["num"]).then((res) => {
        this.code_url = res;
        document.querySelector("img").onload = () => {
          window.URL.revokeObjectURL(document.querySelector("img").src);
        };
        this.codeLoading = false;
      });
    },
  },
  created() {
    this.codeLoading = true;
    //这里恢复了注释
    this.$api.verifyCode(["num"]).then((res) => {
      console.log(res);
      this.code_url = res;
      this.codeLoading = false;
    });
  },
};
</script>

<style scoped lang="stylus">
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to { /* .fade-leave-active below version 2.1.8 */
  opacity: 0;
}

#login {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;

  #form {
    width: 340px;
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);

    .el-input {
      margin-bottom: 20px;

      .iconfont {
        width: 25px;
        line-height: 40px;
        margin-right: 6px;
      }
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>
